<template>
	<view @click="click_pallet_item" class="background_white" style="margin: 24rpx;margin-top: 0rpx;border-radius: 8rpx;box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(209, 211, 217, 0.16);">
		<!-- 上部分 -->
		
		<view class="relative" style="width: 702rpx;height:276rpx;">
			<image mode="aspectFill" :src="pallet.image_link" style="width: 702rpx;height:276rpx;position: absolute;top:0;left:0;right:0;bottom:0"/>
			
			<view class="position flex_col" style="padding:30rpx 0 30rpx 0;border-radius: 8rpx;width: 702rpx;height:276rpx;position: absolute;top:0;left:0;right:0;bottom:0">
				<view class="flex_row" style="align-items: center;margin-left: 40rpx;">
					<text class="iconfont icon_location_grey" style="font-size: 18rpx;color: black;"/>
					<view class="bold" style="font-size: 20rpx;color: black;margin-left: 8rpx;">{{pallet.location}}</view>
					<view class="flex"/>
					<image v-if="show_recommend" src="/static/common/icon_recommend.png" style="height: 64rpx;width: 64rpx;transform:translateY(-20rpx)"/>
					<view style="width: 20rpx;"></view>
				</view>
				<view style="font-size: 32rpx;color: black;margin-left: 40rpx;margin-top: 24rpx;" class="bold">
					{{pallet.title}}</view>
				<view class="single_line" style="max-width: 630rpx;font-size: 20rpx;color: black;margin-left: 40rpx;margin-top: 4rpx;">{{pallet.introduce}}</view>
				<view class="flex_row">
					<view class="center flex_row"
						style="padding:4rpx 20rpx;background-color: black;margin-top: 26rpx;margin-left: 40rpx;border-radius: 10rpx;">
						<view style="font-size: 20rpx;color: white;">{{pallet.delivery}}</view>
						<view style="height:16rpx;width:2rpx;background-color: white;margin: 0 10rpx;" />
						<view class="flex_row baseline">
							<view style="font-size: 14rpx;color: white;">¥</view>
							<view style="font-size: 20rpx;color: white;">{{"  " + pallet.min_price + '~' + pallet.max_price}}</view>
						</view>
					</view>
					<view class="flex">
				
					</view>
				</view>
			</view>
			
			
		</view>
		
		
		<view class="flex_row" style="margin: 20rpx 20rpx;margin-bottom: 10rpx;">
			<view v-for="item,index in pallet.products" :key="index">
				<view v-if="index != 3">
					<view style="position: relative;border-radius: 10rpx;margin-right: 10rpx;">
						<fl_image :src="item.picture" height="158" width="158" style="border-radius: 10rpx" :compress="false"></fl_image>
						<view class="flex_row single_line center" style="width:158rpx;margin-bottom: 4rpx;padding:4rpx 8rpx;background-color: rgba(255, 255, 255, 0.4);border-radius: 4rpx;align-items:center;position: absolute;bottom: 0;">
							<view v-if="item.show" style="font-size: 14rpx;color: black;">直播价：</view>
							<view  v-if="item.show"  class="flex_row center">
								<view style="font-size: 18rpx;color: black;">¥</view>
								<view style="font-size:18rpx;color: black;">{{"  " + get_price(item.price)}}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<!-- 显示数量 -->
					<view v-if="false" style="position: relative;border-radius: 10rpx;height:158rpx;width:158rpx">
						<view class="flex_col center" style="border-radius: 10rpx;background-color: rgba(0, 0, 0, 0.4);height:100%;width:100%;position:absolute;z-index: 1;">
							<view style="font-size: 24rpx;color: white;">查看更多 ></view>
						</view>
					</view>
					<view v-else style="position: relative;border-radius: 10rpx;height:158rpx;width:158rpx">
						<fl_image :src="item.picture" height="158" width="158" style="position:absolute;border-radius: 10rpx" :compress="false"></fl_image>
						<!-- <view :style="{'backgroundImage':url(item.picture)}"></view> -->
						<view class="flex_col center" style="border-radius: 10rpx;background-color: rgba(0, 0, 0, 0.4);height:100%;width:100%;position:absolute;z-index: 1;">
							<view style="font-size: 24rpx;color: white;">共{{product_count}}款 ></view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- bottom -->
		<view class="flex_row center" style="margin: 0 20rpx;">
			<view v-for="item,index in pallet.style_tags" :key="index">
				<view
					style="margin-right: 12rpx;font-size: 20rpx;color: #00C2C4;padding: 10rpx;background-color: #E8F7F7;border-radius: 8rpx;">
					{{item}}</view>
			</view>
			<view class="flex"></view>
			<view class="flex_row center">
				<text class="iconfont icon_eye" style="font-size: 24rpx;color: grey;"/>
				<view style="font-size: 20rpx;color: grey;margin-left: 10rpx;">{{is_empty(pallet.page_view) ? '0' : pallet.page_view}}</view>
			</view>
		</view>
		<view style="height: 20rpx;"></view>
	</view>
</template>

<script>
	import {is_empty_string,format_money} from "../../utils/utils.js"
	import fl_image from "../fl_image.vue"
	import store from "../../utils/store.js"
	export default {
		components: {
			fl_image,
		},
		name: "pallet_item",
		data() {
			return {
				show_recommend:false,
				product_count:0,
			};
		},
		watch:{
			pallet(val){
				console.log("刷新货盘item")
				this.pallet = val
				this.init()
			}
		},
		methods:{
			is_empty(str){
				return is_empty_string(str)
			},
			format(price){
				return format_money(price)
			},
			get_price(price){
				if(!store.state.hasLogin){
					return "***"
				}
				return this.format(price)
			},
			click_pallet_item(){
				this.$emit("click_pallet_item",this.pallet)
			},
			init(){
				if(this.pallet.product_count == 0 || this.pallet.product_count == null){
					this.product_count = 0
				}else{
					this.product_count = this.pallet.product_count
				}
				
				console.log(this.pallet.products)
				if(this.pallet.products.length < 4){
					this.products = [].concat(this.products)
					for (var i = 0; i < 4; i++) {
						this.pallet.products.push({
							picture:"/static/common/pic_placeholder.png",
							price:"",
							show:false,
						})
					}
				}
				this.pallet.products = this.pallet.products.slice(0, 4)
				// show_recommend 是否显示 推荐图标
				var config = store.state.home_data.filter((e) => e.category == this.constants.GOODS_PALLET)[0].config
				// console.log(config.length)
				var res = config.filter(e=>{
					return e.pallets == this.pallet.goods_pallet_code
				})
				
				if(res.length != 0){
					this.show_recommend = true
				}
			},
		},
		mounted() {},
		created() {
			this.init()
			// this.pallet.products.forEach(e=>{
			// 	e.show = true
			// })
			
			// console.log(this.pallet)
			// console.log(config)
		},
		props: {
			pallet: {
				type: Object,
				default: null
			}
		}
	}
</script>

<style>

</style>
